<template>
  <view class="login-page">
    <image src="@/static/icon/userPage/species.png" mode=""></image>
    <view class="login-title">未注册手机验证后自动登录</view>
    <view class="login-phone">
      <u--input placeholder="手机号" border="none" type="number" v-model="phone" @change="change"></u--input>
    </view>
    <view class="login-code">
      <u-input placeholder="请输入验证码" border="none" v-model="code">
        <template slot="suffix">
          <u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
          <view class="code-btn" @click="getCode">{{tips}}</view>
        </template>
      </u-input>
    </view>
    <view class="login-btn">
      <u-button type="primary" color="#2F7EFC" @click="login">登陆/注册</u-button>
    </view>
    <view class="login-radio">
      <u-checkbox-group>
        <u-checkbox @change="onChangeAgree" v-model="radio" shape="circle"></u-checkbox>
      </u-checkbox-group>
      <view class="radio-agreement">我已阅读并同意
        <view>《红料星球用户协议》</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    loginApi
  } from './api.js'
  export default {
    name: 'LoginPage',
    data() {
      return {
        phone: '',
        code: '',
        tips: '获取验证码',
        radio: false,
      };
    },
    methods: {
      change(val) {
        this.phone = val
      },
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          if (!this.phone) {
            uni.showToast({
              title: '请填写手机号',
              icon: "none"
            })
            return
          }
          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      },
      login() {
        if (!this.phone) {
          uni.showToast({
            title: '请填写手机号',
            icon: "none"
          })
          return
        }
        if (!this.code) {
          uni.showToast({
            title: '请输入验证码',
            icon: 'none'
          })
          return
        }
        if (!this.radio) {
          uni.showToast({
            title: '请阅读并同意《红料星球用户协议》',
            icon: 'none'
          })
          return
        }
        uni.switchTab({
          url: '/pages/userPage/index'
        })
      },
      onChangeAgree(val) {
        this.radio = val
      }
    },
  };
</script>

<style lang="less" scoped>
  .login-page {
    padding: 0 84rpx;
    padding-top: var(--status-bar-height);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .login-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #909090;
      margin-top: 30rpx;

    }

    .login-phone {
      width: 584rpx;
      height: 92rpx;
      background: rgba(242, 242, 242);
      border-radius: 20rpx;
      margin-top: 50rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 40rpx;
    }

    .login-code {
      width: 584rpx;
      height: 92rpx;
      background: rgba(242, 242, 242);
      border-radius: 20rpx;
      box-sizing: border-box;
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      padding: 0 40rpx;

      .code-btn {
        font-size: 28rpx;
        font-weight: 500;
        color: #2F7EFC;
      }
    }

    .login-btn {
      margin-top: 60rpx;
      width: 100%;

      /deep/ .u-button--normal {
        font-size: 40rpx;
      }
    }

    .login-radio {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 38rpx;


      .radio-agreement {
        display: flex;
        font-size: 28rpx;
        font-weight: 500;
        color: #313131;

        :first-child {
          color: #FF5353;
        }
      }
    }
  }
</style>